<template>
    <div class="product-cate">
        <el-card class="box-card">
            <span><i class="iconfont icon-dingdan1 icon"> </i>产品分类数据列表</span>
            <el-button style="float: right; padding: 3px" type="primary">添加</el-button>
            <el-button
                style="float: right; padding: 3px; margin-right: 5px"
                type="primary"
                v-if="parentId != 0"
                @click="goBackLevel"
                >返回上级节点</el-button
            >
        </el-card>

        <el-table :data="cateGoryList" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="90"> </el-table-column>
            <el-table-column prop="name" label="分类名称" width="150"></el-table-column>
            <el-table-column label="级别">
                <template slot-scope="scope">
                    <div>{{ scope.row.level + 1 }}级</div>
                </template>
            </el-table-column>
            <el-table-column prop="product_count" label="商品数量"></el-table-column>
            <el-table-column prop="product_unit" label="数量单位"></el-table-column>
            <el-table-column label="是否显示" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.show_status" :active-value="1" :inactive-value="0"> </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序"></el-table-column>
            <el-table-column label="设置">
                <template>
                    <el-button size="mini">查看下级</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="editor(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.pageNum"
            :page-sizes="[2, 5, 10, 15]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { getCateGoryList, fetchProductCatePage } from "@/network/product";

export default {
    name: "productCate",
    data() {
        return {
            cateGoryList: [],
            showStatus: true,
            listQuery: {
                //key的名称和后台的接收名称是一致的，不能改
                pageNum: 1, //页码，默认是第一页
                pageSize: 5, //每页显示的数量
            },
            total: 0, //数据的总条数
            parentId: 0, //父级id号  查看下一级和返回上一级
        };
    },
    methods: {
        statusChange(row) {
            console.log("row:", row);
        },
        // totale
        async getCateList() {
            const res = await fetchProductCatePage(this.listQuery, this.parentId);
            this.cateList = res.data;
            this.total = res.total;
        },

        async getCateGoryList() {
            const { data } = await getCateGoryList();
            this.cateGoryList = data;
        },

        // 查看下一级
        showNextLevel(id) {
            this.parentId = id;
            this.getCateList();
        },
        // 返回上一级
        goBackLevel() {
            this.parentId = 0;
            this.getCateList();
        },
        handleSizeChange() {},
        handleCurrentChange() {},
    },
    filters: {
        jibeiFilter(val) {
            return val ? "二级" : "一级";
        },
    },
    mounted() {
        this.getCateGoryList();
        this.getCateList();
    },
};
</script>

<style lang="scss" scoped>
.box-card {
    margin-bottom: 15px;
}
</style>
